<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
		canvas{
			background: #272822;
		}
		
	</style>
	</head>
	<body>
		
		<canvas id="canvas" width="800" height="500"></canvas>
	
	<script type="text/javascript">
		
		var canvas = document.getElementById("canvas");
		var cv = canvas.getContext('2d');
		
//		开启路径
		cv.beginPath();
//		定义笔触开始的地方
		cv.moveTo(300,220);
//		定义扇形的路径
		cv.arc(300,220,200,0*Math.PI/180,60*Math.PI/180);
//		指定填充颜色
		cv.fillStyle = 'yellow';
//		将图形填充
		cv.fill();
		
		
		//		开启路径
		cv.beginPath();
//		定义笔触开始的地方
		cv.moveTo(300,220);
//		定义扇形的路径
		cv.arc(300,220,200,60*Math.PI/180,160*Math.PI/180);
//		指定填充颜色
		cv.fillStyle = 'deepskyblue';
//		将图形填充
		cv.fill();
		
		
		//		开启路径
		cv.beginPath();
//		定义笔触开始的地方
		cv.moveTo(300,220);
//		定义扇形的路径
		cv.arc(300,220,200,160*Math.PI/180,270*Math.PI/180);
//		指定填充颜色
		cv.fillStyle = 'lawngreen';
//		将图形填充
		cv.fill();
		
		
		
		
		//		开启路径
		cv.beginPath();
//		定义笔触开始的地方
		cv.moveTo(300,220);
//		定义扇形的路径
		cv.arc(300,220,200,270*Math.PI/180,360*Math.PI/180);
//		指定填充颜色
		cv.fillStyle = 'pink';
//		将图形填充
		cv.fill();
		
	</script>
		
	</body>
</html>
